<template>
  <transition name="fade">
    <div v-if="show" class="plugin-previewImg-back" ref="back" @mousedown="mousedown" @click = "close">
      <div v-if="i == index" v-for="(item,i) in imgList" :key="i" class="plugin-previewImg-img-con">
        <img ref="img" style="transform: translateX(0px) translateY(0px)" @dragstart.prevent  @click.stop :src="item" alt class="plugin-previewImg-img">
      </div>
      <div class="plugin-previewImg-close" @click.stop="close">
          <i class="el-icon-close"></i>
      </div>
      <div v-if="imgList.length > 1" class="plugin-previewImg-btn plugin-previewImg-left"  @click.stop="prev">
          <i class="el-icon-arrow-left"></i>
      </div>
      <div v-if="imgList.length > 1" class="plugin-previewImg-btn plugin-previewImg-right"  @click.stop="next">
          <i class="el-icon-arrow-right"></i>
      </div>
      <div class="plugin-previewImg-index">
          <span>{{index + 1}}</span>
          <span>/</span>
          <span>{{imgList.length}}</span>
      </div>
    </div>
  </transition>
</template>

<script type="text/babel">
export default {
  data() {
    return {
      show: false,
      imgList: [],
      index: 0
    };
  },

  computed: {},
  watch: {},
  methods: {
    close() {
      this.show = false;
	},
	up(){
		if (!this.show) {
			return;
		}
	
		// 变大
		let dom = this.$refs.img[0]
		let h = dom.offsetHeight
		let w = dom.offsetWidth
		
		dom.style.width = (1.025 * w) + "px"
		dom.style.height = (1.025 * h) + "px"
	},
	down(){
		if (!this.show) {
			return;
		}

		// 变小
		let dom = this.$refs.img[0]
		let h = dom.offsetHeight
		let w = dom.offsetWidth
		
		if(w < 45 || h < 45){
			return
		}

		dom.style.width = (0.975 * w) + "px"
		dom.style.height = (0.975 * h) + "px"

	},
    // 前一张
    prev() {
      if (!this.show) {
        return;
      }

      if (this.index == 0) {
        this.index = this.imgList.length - 1;
      } else {
        this.index--;
      }
    },
    // 后一张
    next() {
      if (!this.show) {
        return;
      }

      if (this.index == this.imgList.length - 1) {
        this.index = 0;
      } else {
        this.index++;
      }
    },
    mousedown(e){
      // 背景
      let back = e.currentTarget
      // 监听mousemove

      // 监听拖动
      document.addEventListener("mousemove",this.mousemove)

      // 
      document.addEventListener("mouseup",this.mouseup)
    },
    mouseup(e){
      document.removeEventListener("mousemove",this.mousemove)
      document.removeEventListener("mouseup",this.mouseup)
    },
    mousemove(e){
      let x = e.movementX
      let y = e.movementY

      let dom = this.$refs.img[0]

      let t = dom.style.transform


      let tx = t.match(/translateX\((.*?)px\)/)[1]
      let ty = t.match(/translateY\((.*?)px\)/)[1]

      tx = parseInt(tx)
      ty = parseInt(ty)
    
  
      dom.style.transform = `translateX(${x + tx}px) translateY(${y + ty}px)`
  
    },
    keydown(e) {
      if (!this.show) {
        return;
      }

      e.preventDefault();

      if (e.keyCode === 37 || e.keyCode === 38) {
        //左键 上
        this.prev();
      }
      if (e.keyCode === 39 || e.keyCode === 40) {
        //右键 下
        this.next();
      }
      if (e.keyCode === 27) {
        // esc关闭消息
        if (this.show) {
          this.close();
        }
      }
    },
  },
  mounted() {
	let that = this
    document.addEventListener("keydown", this.keydown);

    //兼容性写法，该函数也是网上别人写的，不过找不到出处了，蛮好的，所有我也没有必要修改了
    //判断鼠标滚轮滚动方向
    if (window.addEventListener)
      //FF,火狐浏览器会识别该方法
		window.addEventListener("DOMMouseScroll", wheel, false);
		window.onmousewheel = document.onmousewheel = wheel; //W3C
		//统一处理滚轮滚动事件
		function wheel(event) {
			if (!that.show) {
				return;
			}

			event.preventDefault();
	  

			var delta = 0;
			if (!event) event = window.event;
			if (event.wheelDelta) {
					//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
					delta = event.wheelDelta / 120;
					if (window.opera) 
						delta = -delta; //因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
				} else if (event.detail) {
					//FF浏览器使用的是detail,其值为“正负3”
					delta = -event.detail / 3;
				}
			if (delta) handle(delta);
		}
		//上下滚动时的具体处理函数
		function handle(delta) {
			if (delta < 0) {
				//向下滚动
				that.down()
			} else {
				//向上滚动
				that.up()
			}
		}
  },
  beforeDestroy() {
    document.removeEventListener("keydown", this.keydown);
  }
};
</script>

<style scoped>
.plugin-previewImg-back {
  position: fixed;
  z-index: 3000;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.plugin-previewImg-back .plugin-previewImg-img-con {
  width: 100vw;
  height: 100vh;
  display: table-cell;
  font-size: 0;
  text-align: center;
  vertical-align: middle;
}

.plugin-previewImg-back .plugin-previewImg-close{
  position: absolute;
  right: 0;
  top:0;
  width: 80px;
  height: 55px;
  background: rgba(0, 0, 0, 0.4);
  color: #cacaca;
  text-align: center;
  font-size: 35px;
  line-height: 55px;
}
.plugin-previewImg-back .plugin-previewImg-close:hover{
  background: #f44;
  color: #fff;
  cursor: pointer;
}
/* 按钮 */
.plugin-previewImg-back .plugin-previewImg-btn{
  position: absolute;
  top:calc(50vh - 60px);
  width: 80px;
  height: 80px;
  line-height: 80px;
  border: 3px solid #cacaca;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #cacaca;
  text-align: center;
  font-size: 38px;
  cursor: pointer;
}
.plugin-previewImg-back .plugin-previewImg-btn:hover{
  background: rgba(0, 0, 0, 0.7);
  border-color: #fff;
  color: #fff;
}

.plugin-previewImg-back .plugin-previewImg-left{
    left: 30px;
}

.plugin-previewImg-back .plugin-previewImg-right{
    right: 30px;
}


.plugin-previewImg-back .plugin-previewImg-img {
  width: 50vw;
  margin: 0 auto;
  vertical-align: middle;
}

.plugin-previewImg-back .plugin-previewImg-index{
    position: absolute;
    color: #fff;
    width: 100vw;
    bottom: 18px;
    text-align: center;
    font-size: 28px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

